<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
</head>

<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
        <h1>
            统计分析
            <small>厂家销量统计</small>
        </h1>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div id="main" style="width: 1000px;height:400px;"></div>
        </div>
    </section>
</div>
</body>

<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<script type="text/javascript">

    // 发出异步的请求获取产品销售的前五名
    $.ajax({
        url: "/stat/getSellData.do",
        dataType: "json",
        success: function (resultData) {   // [{name:"xx": value:110},{name:"产品名称": value:220}]

            // 3.1 (找到div)基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 3.2 准备报表的数据
            var nameArray = []; // 定义一个数组存储所有的name
            var valueArray = []; // 定义一个数组存储所有的value
            for (var index = 0; index < resultData.length; index++) {
                var object = resultData[index];
                nameArray[index] = object.name;
                valueArray[index] = object.value;
            }

            option = {
                xAxis: {
                    type: 'category',
                    data: nameArray
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: valueArray,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }]
            };

            // 3.3 把div与报表的数据整合形成一张报表
            myChart.setOption(option);
        }
    })


</script>

</html>